import React, { useState, useEffect } from "react";
import { PropsType, defaultData } from "./interface";

import "./index.less";
import { Button, Checkbox } from "antd";
import { RightOutlined } from "@ant-design/icons";

const Cascader: React.FC<PropsType> = (props) => {
  const { data, placeholder, onChange } = props;
  const [newdata, setnewdata] = useState<any[]>([data]);
  const [isopen, setisopen] = useState<boolean>(false);
  const [checkdata, setcheckdata] = useState<defaultData[]>([]);

  const ctroDrop = (
    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
    type: boolean
  ) => {
    if (type) {
      document.getElementById("calcader")?.click();
      setnewdata([data]);
      setisopen(!isopen);
    } else {
      setisopen(true);
    }

    e.nativeEvent.stopImmediatePropagation();
  };
  const closedrop = () => {
    setisopen(false);
    setnewdata([]);
    setcheckdata([]);
  };
  // 渲染数据
  const setdata = (data: defaultData[], type: boolean, index: number) => {
    if (data.length === 0) {
      return;
    }
    newdata[index + 1] = data;
    newdata.splice(index + 2, newdata.length - 1);
    setnewdata(newdata.slice());
  };
  const checkboxchange = (e: any, el: defaultData) => {
    let newcheckdata = checkdata;
    if (e.target.checked) {
      newcheckdata.push(el);
    } else {
      newcheckdata.forEach((element, index) => {
        if (element === el) {
          newcheckdata.splice(index, 1);
        }
      });
    }
    setcheckdata(newcheckdata);
  };

  useEffect(() => {
    document.addEventListener("click", closedrop);

    return () => document.removeEventListener("click", closedrop);
  }, []);

  return (
    <div className="cascader_box" id="calcader">
      <div
        className="cascader_header"
        onClick={(event) => ctroDrop(event, true)}
      >
        <i>{placeholder ? placeholder : "请选择"}</i>
        <RightOutlined />
      </div>
      <div className={`cascader_drop ${isopen ? "cascader_display" : ""}`}>
        <div
          className="cascader_list"
          onClick={(event) => ctroDrop(event, false)}
        >
          {newdata.map((item: any, j: number) => {
            return (
              <ul className="cascader_list1" key={j}>
                {item.map((el: defaultData, i: number) => {
                  return (
                    <li key={i} onClick={() => setdata(el.children, true, j)}>
                      {el.children.length === 0 ? (
                        <Checkbox
                          onChange={(event) => checkboxchange(event, el)}
                        >
                          {el.title}
                        </Checkbox>
                      ) : (
                        <i>{el.title}</i>
                      )}
                      {el.children.length > 0 ? (
                        <RightOutlined className="iconcascader" />
                      ) : (
                        <span></span>
                      )}
                    </li>
                  );
                })}
              </ul>
            );
          })}
        </div>

        <div className="cascader_btnbox">
          <Button>取消</Button>
          <Button type="primary" onClick={() => onChange(checkdata)}>
            确定
          </Button>
        </div>
      </div>
    </div>
  );
};

export default Cascader;
